
//  此mixin,当鼠标松开时, 是否需要将音乐播放的进度时间更改成松开时进度条的时间

import { useStore } from 'vuex';
import { toRef, watch } from 'vue';
import bodyMouse from "@/baseFnMixin/bodyMouseupJudge.js"
export default function (element) {
    const body = document.body;
    const store = useStore();
    //  进度条按钮是否处于按下状态
    const flagProgressBar = toRef(store.state.ProgressBar, 'flagProgressBar');
    //  用于开启body的mouseup, 控制音量模块与播放列表的隐藏。
    const bodymouse = bodyMouse();
    watch(flagProgressBar, (value) => {
        //  鼠标按下时执行
        if (value) {
            body.onmouseup = null;
            body.onmouseup = function (e) {
                let flag = true;
                let ele = e.target;
                while (flag) {
                    switch (ele) {
                        //  鼠标是在底部播放功能区松开的,需要将进度条的时间作为音乐播放的时间
                        case element:
                            if (store.state.PlaySong.presentSong !== null) {
                                store.commit("ProgressBar/changePlayTime", store.state.ProgressBar.width);
                                //  让歌词重新定位
                                store.commit("SongLyric/changeLyricProgressTime", 0)
                            }
                            
                            flag = false;
                            break;
                        //  鼠标不是在底部播放功能区松开的,不需要更改播放进度时间    
                        case body:
                            store.commit("ProgressBar/playTimeProgressBar", store.state.ProgressBar.temporaryTime);
                            flag = false;
                            break;
                        default:
                            ele = ele.parentNode;
                            break;
                    }
                }
                //  解绑事件
                body.onmouseup = null;
                //  当音量模块或者播放列表播放处于显示状态时,则重新开启body的mouseup。
                if (store.state.SongVolume.volumeShow || store.state.SongList.flag) {
                    bodymouse();
                }
                //  将鼠标松开时的状态存储在vuex中
                store.commit("ProgressBar/changeFlagProgressBar", false);
            };
        }

    })
}



